<ion-header>
  <ion-toolbar>
    <ion-title>{{ storageDrive ? 'Set Password' : 'Unlock Drive' }}</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <div style="padding: 8px 24px">
    <p *ngIf="!storageDrive else choose">
      Enter the password that was used to encrypt this drive.
    </p>
    <ng-template #choose>
      <p>
        Choose a password for your server.
        <i>Make it good. Write it down.</i>
      </p>
    </ng-template>

    <form (ngSubmit)="storageDrive ? submitPw() : verifyPw()">
      <ion-item
        [class]="pwError ? 'error-border' : password && storageDrive ? 'success-border' : ''"
      >
        <ion-input
          #focusInput
          [(ngModel)]="password"
          [ngModelOptions]="{'standalone': true}"
          [type]="!unmasked1 ? 'password' : 'text'"
          placeholder="Enter Password"
          (ionChange)="validate()"
        ></ion-input>
        <ion-button fill="clear" color="light" (click)="unmasked1 = !unmasked1">
          <ion-icon
            slot="icon-only"
            [name]="unmasked1 ? 'eye-off-outline' : 'eye-outline'"
            size="small"
          ></ion-icon>
        </ion-button>
      </ion-item>
      <p *ngIf="pwError" class="error-message">{{ pwError }}</p>
      <ng-container *ngIf="storageDrive">
        <ion-item
          [class]="verError ? 'error-border' : passwordVer ? 'success-border' : ''"
        >
          <ion-input
            [(ngModel)]="passwordVer"
            [ngModelOptions]="{'standalone': true}"
            [type]="!unmasked2 ? 'password' : 'text'"
            placeholder="Retype Password"
            (ionChange)="checkVer()"
          ></ion-input>
          <ion-button
            fill="clear"
            color="light"
            (click)="unmasked2 = !unmasked2"
          >
            <ion-icon
              slot="icon-only"
              [name]="unmasked2 ? 'eye-off-outline' : 'eye-outline'"
              size="small"
            ></ion-icon>
          </ion-button>
        </ion-item>
        <p *ngIf="verError" class="error-message">{{ verError }}</p>
      </ng-container>
      <input type="submit" style="display: none" />
    </form>
  </div>
</ion-content>

<ion-footer>
  <ion-toolbar>
    <ion-button
      class="ion-padding-end"
      slot="end"
      color="warning"
      (click)="cancel()"
    >
      Cancel
    </ion-button>
    <ion-button
      class="ion-padding-end"
      slot="end"
      strong="true"
      (click)="storageDrive ? submitPw() : verifyPw()"
    >
      {{ storageDrive ? 'Finish' : 'Unlock' }}
    </ion-button>
  </ion-toolbar>
</ion-footer>
